<template>
	<view class="page">
		<!-- <view class="cu-custom bg-white solid-bottom" :style="[{height: CustomBar+'px',paddingTop: StatusBar+'px'}]">
      <view class="cu-bar bg-white fixed solid-bottom" :style="[{height: CustomBar+'px',paddingTop: StatusBar+'px'}]">
        <view class="search-form round" @tap="navToSearch" style="height: 64rpx;">
          <text class="cuIcon-search"><text class="padding-sm fu-fs26 text-666">搜索你想要的商品</text></text>
        </view>
      </view>
    </view> -->

		<view style="height:100%;" class="content solid-top flex">
			<!-- 左边tab栏开始 -->
			<scroll-view class="left" scroll-y>
				<view style="height: 10rpx;width: 100%;" :style="{background: currentIndex == 0?'#ffffff':''}"></view>
				<block v-for="(item, index) in lists" :key="index">

					<view class="item text-center fu-fs28"
						:class="[index === currentIndex ? 'active bg-white text-bold' : 'text-999']"
						@click="handleSelect(item, index)">
						{{ item.name }}
						<view class="cuIconlujing226"></view>
					</view>
				</block>
			</scroll-view>
			<!-- 左边tab栏结束 -->
			<!-- 右边列表开始 -->
			<view class="right flex flex-direction flex-sub">
				<scroll-view class="classify-box bg-white padding-lr-xs" scroll-y :scroll-top="scrollTop"
					:scroll-into-view="scrollViewId" @scroll="onScroll" :scroll-with-animation="true">

					<block v-for="(item, i) in lists" :key="item.id">
						<view v-if="item.child && item.child.length > 0" class="cateRightBox2" :id="'po'+i">
							<view class="cateRightBox padding-lr-sm bg-white">
								<!-- 顶部广告轮播图开始 -->
								<!-- <swiper v-if="i==0" class="one-ad" autoplay :interval="5000" circular>
								<swiper-item v-for="(item, index) in ad" :key="index">
									<image :src="item.thumb" mode="aspectFill" class="ad-img"></image>
								</swiper-item>
							</swiper> -->
								<!-- 顶部广告轮播图结束 -->
								<view class="flex align-center text-333 fu-fs28 justify-between padding-top padding-left-sm">
									<text class="text-bold">{{ item.name }}</text>
								</view>
								<view class="cu-list grid col-3 no-border">
									<view class="cu-item flex justify-center align-center" v-for="ele in item.child" :key="ele.id"
										@click="navToList(ele.id)">
										<view class="fu-block-146">
											<fu-image radius="8rpx" :src="ele.thumb" mode="aspectFill" lazy-load></fu-image>
										</view>
										<text class="text-666 fu-fs24">{{ ele.name }}</text>
									</view>
								</view>
							</view>
						</view>
					</block>
				</scroll-view>
			</view>
			<!-- 右边列表结束 -->
		</view>
		<fu-notwork></fu-notwork>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollViewId: '',
				scrollTop: 0,
				CustomBar: this.CustomBar, //状态栏高度
				StatusBar: this.StatusBar, //状态栏高度
				currentIndex: 0, //选中下标
				lists: [], //列表
				banners: [], //轮播图
				ad: [], // 轮播图广告
				topList: [],
				isLeftClick: false,
			};
		},
		onLoad() {

			// 如分类页需要广告位，放开此注释↓
			// this.getAd();
		},
		onShow() {
			this.loadData();
			this.setTabBarItem();
			// 入仓
			// this.setTabBarItem1();
		},
		methods: {
			getNodesInfo() {
				this.$nextTick(() => {
					//小程序没有doucument和window对象(undefined)
					const query = uni.createSelectorQuery().in(this);
					query.selectAll(".cateRightBox2").boundingClientRect().exec(res => {
						let nodes = res[0];
						let arr = [];
						nodes.map(item => {
							arr.push(item.top);
						})
						this.topList = arr;
					})
				});
			},
			onScroll(e) {
				if (this.isLeftClick) {
					this.isLeftClick = false;
					return;
				}
				// let tempTop = e.detail.scrollTop							//scroll期间赋值
				let tempTop = e.target.scrollTop;
				for (let i = 0; i < this.topList.length; i++) {
					let h1 = this.topList[i];
					let h2 = this.topList[i + 1];
					if (tempTop > h1 && tempTop < h2) {
						this.currentIndex = i;
					}
				}
			},
			/**
			 * @event
			 * @description  广告轮播图
			 * */
			getAd() {
				this.$api.post(global.apiUrls.postAdvert, {
					typeid: 10
				}).then(res => {
					if (res.data.code == 1) {
						this.ad = res.data.data;
					}
				});
			},
			/**
			 * @event
			 * @description  tab切换
			 * @param {Number} item -当前选中数据  //暂时没用
			 * @param {Number} index - 选中下标
			 * @return {Boolean}
			 * */
			handleSelect(item, index) {
				this.scrollViewId = "po" + index;
				this.currentIndex = index;
				this.isLeftClick = true;
				this.$nextTick(() => {
					this.scrollTop = 0
				});
			},
			/**
			 * @event
			 * @description  获取分类
			 * */
			loadData() {
				this.$api.post(global.apiUrls.postGoodsGetCategoryList).then(res => {
					if (res.data.code == 1) {
						let list = res.data.data;
						// 判断没有二级分类删除此分类
						list.forEach((item, index) => {
							if (!item.child) {
								list.splice(index, 1);
							}
							// 判断没有三级分类删除此分类
							if (this.filterEmpty(item.child)) {
								list.splice(index, 1);
							}
						});
						this.lists = list;
						this.getNodesInfo();
					} else {
						this.$message.error(res.data.msg);
					}
				});
			},
			/**
			 * @description 判断是否有子分类
			 * @return {Boolean}
			 */
			filterEmpty(arr) {
				if (!arr) {
					return false;
				}
				let num = 0;
				arr.forEach(item => {
					if (!item.child) {
						num++;
					}
				});
				if (num == arr.length) {
					return true;
				} else {
					return false;
				}
			},
			/**
			 * @event
			 * @description  去分类列表页
			 * @param {String} name 选择的分类
			 * @param {String} cid 选择的分类id
			 * */
			navToList(cid) {
				this.$urouter.navigateTo({
					url: '/pages/goods/goodslist/goods-search/index',
					params: {
						cid: cid
					}
				});
			},
			/**
			 * @event
			 * @description  去搜索页面
			 * @return {Boolean}
			 * */
			navToSearch() {
				this.$urouter.navigateTo('/pages/index/search/search/index');
			}
		}
	};
</script>

<style lang="scss" scoped>
	.page {
		height: 100vh;
		background: #f8f8f8;
		overflow: hidden;

		.content {
			.left {
				width: 168rpx;
				min-width: 168rpx;
				height: 100%;

				.item {
					width: 100%;
					height: 100rpx;
					line-height: 100rpx;
					transition: all 0.2s;

					&.active {
						color: $theme;
						position: relative;

						&::before {
							content: ' ';
							position: absolute;
							top: 50%;
							transform: translateY(-50%);
							left: 0;
							width: 6rpx;
							height: 24rpx;
							background: $theme;
							border-radius: 4rpx;
						}
					}
				}
			}

			.right {
				height: 100%;

				.classify-box {
					height: 100%;

					.cateRightBox {
						overflow: hidden;
					}

					.cateRightBox2:last-child {
						padding-bottom: 20rpx;
					}
				}
			}
		}
	}

	.cu-bar .search-form {
		line-height: 52rpx;
		height: 52rpx;
	}

	.cu-list.grid.no-border>.cu-item {
		padding-top: 24rpx;
		padding-bottom: 0 !important;
		justify-content: flex-start;
	}

	.cu-list.grid>.cu-item uni-text {
		margin-top: 16rpx;
	}

	.cu-list.grid.no-border {
		padding: 20rpx 0;
	}
</style>